
<template>
  <main-container headerText="财务管理 >> 拼团统计列表">
    <div class="content" :key="showPageKey">
      <top-option>
        <div slot="left-box">
          <input-search
            lableName="手机号"
            inputValue="tel"
            :tThis="this"
            inputPlaceholder="请输入手机号"
          />

          <input-search
            lableName="拼团编号"
            inputValue="productId"
            :tThis="this"
            inputPlaceholder="请输入产品id"
          />

          <date-search
            lableName="起止时间"
            :tThis="this"
            labelWidth="80px;"
            dateWidth="150px;"
            @dateChange="handleSearchDateChange"
          />
        </div>
        <div slot="right-box">
          <div class="sub">
            <el-button @click="handleSearch" class="orange">查询</el-button>
            <el-button type="primary" @click="exportInfo">导出</el-button>
          </div>
        </div>
      </top-option>

      <top-option>
        <div slot="left-box">
          <div class="sub padding0">
            拼团总金额：{{ statisticsData.amount || "-" }}
          </div>
          <div class="sub padding0">
            总拼呗：{{ statisticsData.pinBei || "-" }}
          </div>
          <div class="sub padding0">
            总拼豆：{{ statisticsData.pinDou || "-" }}
          </div>
          <div class="sub padding0">
            今日拼团数：{{ statisticsData.todayCount }}
          </div>
          <div class="sub padding0">
            昨日拼团数：{{ statisticsData.yesCount }}
          </div>
        </div>
        <div slot="right-box">
          <div class="sub"></div>
        </div>
      </top-option>

      <!-- 列表栏 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; border-radius: 4px"
          class="tableBox"
          border
        >
          <el-table-column label="序号" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.index || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="拼团编号" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.productId || "-" }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="产品id" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.productId || "-" }}
            </template>
          </el-table-column> -->
          <el-table-column label="产品名称" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.productName || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="用户id" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.userId || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.tel || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="拼呗拨比" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.pinBei || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="拼豆拨比" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.pinDou || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="拼团状态" width="undefined">
            <template slot-scope="scope">{{
              orderStateShow[scope.row.orderState + ""] || "-"
            }}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.createDate || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="90">
            <template slot-scope="scope">
              <el-button
                @click="handleView"
                type="primary"
                :data-id="scope.row.id"
                size="small"
                >明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageIdx"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="onePageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageCount"
          ></el-pagination>
        </div>

        <div class="confirm-btn">
          <el-button class="paging-btn" @click="handleEnter" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  props: {},
  data() {
    return {
      showPageKey: 100,
      statisticsData: {},
      //列表
      tableData: [],
      multipleSelection: [],
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      formData: {
        tel: null,
        productId: null,
        startDate: null,
        endDate: null,
      },
      orderStateShow: {
        1: "拼团中",
        2: "拼团成功",
        3: "已取消",
      },

      allMethods: "",
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();
    //页面数据重置 1
    if (this.recoverSearchF) {
      this.recoverSearchF({ _this: this });
    }
    this.initRequest();

    this.getInitData();
    this.getStatisticsF();
  },
  methods: {
    /* 导出报表 */
    exportInfo() {
      let url = this.api.financial_m.pingtuan_export;
      var { tel, productId, startDate, endDate } = this.formData;
      this.$http
        .post(
          url,
          {
            tel,
            productId,
            startDate,
            endDate,
            pageIndex: this.currentPageIdx,
            pageSize: this.onePageSize,
          },
          { responseType: "blob" }
        )
        .then((res) => {
          // console.log("导出", res.header["Content-disposition"]);
          let fileName = "拼团统计列表.xls";
          let blob = new Blob([res.data], { type: "application/x-xls" });
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            var link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(link.href);
          }
        });
    },

    /* 获取统计数据 */
    getStatisticsF() {
      //拼团统计数据
      var { tel, productId, startDate, endDate } = this.formData;
      this.tools.basePost({
        url: this.api.financial_m.ping_tuan_statistics,
        params: {
          tel,
          productId,
          startDate,
          endDate,
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
        },
        success: (res) => {
          if (res.code == 200) {
            for (var itemKey in res.data) {
              this.statisticsData[itemKey] = res.data[itemKey];
            }
          }
        },
        fail: (err) => {},
      });

      //统计拼团数量
      var curDate = new Date().format("yyyy-MM-dd");
      var lastDate = new Date(
        new Date().getTime() - 24 * 60 * 60 * 1000
      ).format("yyyy-MM-dd");
      //今日的日期和昨日的日期
      var yesterday = {
        startDate: curDate + " 00:00:00",
        endDate: curDate + " 23:59:59",
      };
      var today = {
        startDate: lastDate + " 00:00:00",
        endDate: lastDate + " 23:59:59",
      };
      //昨日拼团数
      this.tools.basePost({
        url: this.api.financial_m.ping_tuan_page,
        params: {
          startDate: yesterday.startDate,
          endDate: yesterday.endDate,
        },
        success: (res) => {
          console.log(888, res);
          if (res.code == 200) {
            console.log(this.statisticsData);
            this.statisticsData.yesCount = res.data.total;
            console.log(this.statisticsData.yesCount);
            this.showPageKey += 1;
          }
        },
        fail: (err) => {},
      });
      //今日拼团数
      this.tools.basePost({
        url: this.api.financial_m.ping_tuan_page,
        params: {
          startDate: today.startDate,
          endDate: today.endDate,
        },
        success: (res) => {
          console.log(888999, res);
          if (res.code == 200) {
            this.statisticsData.todayCount = res.data.total;
          }
          this.showPageKey += 1;
        },
        fail: (err) => {},
      });
    },

    //明细
    handleView(e) {
      this.allMethods.handleView(e);
    },

    //查询
    handleSearch() {
      this.allMethods.handleSearch();
      this.getStatisticsF();
    },

    //日期选择
    handleSearchDateChange(dateArr, startDate, endDate) {
      this.formData.startDate = startDate;
      this.formData.endDate = endDate;
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //明细
        handleView(e) {
          var { id } = e.currentTarget.dataset;
          _this.$router.push({
            path: "/financial_m_ping_tuan_ming_xi_table",
            query: { id },
          });
        },

        //查询
        handleSearch() {
          _this.currentPageIdx = 1;
          var { tel, productId, startDate, endDate } = _this.formData;
          //重置页码
          _this.currentPageIdx = 1;
          //保存数据 2
          if (_this.saveSearchF) {
            _this.saveSearchF({ _this: _this });
          }

          _this.LingChuang_request.handleSearch({
            tel,
            productId,
            startDate,
            endDate,

            pageIndex: _this.currentPageIdx,
            pageSize: _this.onePageSize,
          });
        },
      };
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.financial_m.ping_tuan_page,
        searchUrl: API.financial_m.ping_tuan_page,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
        },
        function (res) {
          //初始格式化数据
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
      //分页数据 3
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(val) {
      this.LingChuang_request.handleSelectionChange(val);
    },
    //表格默认函数

    /* 图片预览 */
    previewImgF({ imgUrl }) {
      this.tools.touchGEvent({
        eName: "previewImg",
        imgUrl,
      });
    },

    /* 恢复搜索状态 6 */
    recoverSearchF({ _this }) {
      _this.tools.recoverSearchF({
        _this,
        subItemName: "/financial_m_ping_tuan_table",
      });
    },

    /* 保存搜索状态 7 */
    saveSearchF({ _this }) {
      _this.tools.saveSearchF({
        _this,
        subItemName: "/financial_m_ping_tuan_table",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//隐藏样式类
.hidden {
  display: none !important;
}

.padding0 {
  padding: 0 !important;
  padding-bottom: 15px !important;
  margin: 0 !important;
  font-size: 17px;
}
</style>
